import React from 'react';
import {StyleSheet, Text, View,} from 'react-native';

export default class CardFooter extends React.Component {

  static defaultProps = {
    style: {},
  };

  render() {
    const {content, extra, style, ...restProps} = this.props;

    const contentDom = content !== undefined && React.isValidElement(content) ? (
      <View style={{flex: 1}}>{content}</View>) : (
      <Text style={styles.footerContent}>{content}</Text>
    )

    const extraDom =
      extra !== undefined && React.isValidElement(extra) ? (
        <View style={{flex: 1}}>{extra}</View>
      ) : (
        <Text style={[styles.footerExtra]}>{extra}</Text>
      );

    return (
      <View style={[styles.footerWrap, style]} {...restProps}>
        {contentDom}
        {extra ? extraDom : null}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  footerWrap: {
    flexDirection: 'row',
    paddingHorizontal: 15,
  },
  footerContent: {
    flex: 1,
    fontSize: 14,
    color: '#888888',
  },
  footerExtra: {
    textAlign: 'right',
    fontSize: 14,
    color: '#888888',
  },
});
